<template>
    <div class="container">
        <div class="d-flex align-items-baseline pt-4">
            <img style="width:32px" class="rounded"
                src="https://ui-web-log-1310478966.cos.ap-guangzhou.myqcloud.com/LOGO007.png" alt="">
            <div class="h1 fw-bold ms-2">LottieFiles</div>
        </div>
        <div class="mt-2 text-black-50 ">
            Lottie是一种基于JSON的动画文件格式，它使设计者能够在任何平台上发布动画，就像发布静态资产一样简单。它们是可以在任何设备上运行的小文件，可以放大或缩小而无需像素化。LottieFiles允许您以最简单的方式创建、编辑、测试、协作和发布Lottie。您可以访问他的
            <a class="text-info" href="https://app.lottiefiles.com/" target="_blank">官网网站</a>或者<a class="text-info"
                href="https://github.com/LottieFiles/lottie-player/" target="_blank">Github</a>
            查看详情。本站内容简单记录其安装和使用过程。<br>
            案例由"vite": "^2.9.15","lottie-web": "^5.9.6","vue": "^3.2.25"的基本使用,仅供参考学习，如有错误请点击右下角操作盘提交错误。
            <div class="text-primary mt-2  border-bottom">更新时间：2022/10/26</div>
        </div>
        <div class="h5 mt-4">
            基本案例
        </div>
        <div class="row">
            <div class="col-6 col-lg-3 mt-2" style="height: 40vh;" ref="animation1"></div>
            <div class="col-6 col-lg-3 mt-2" style="height: 40vh;" ref="animation2"></div>
            <div class="col-6 col-lg-3 mt-2" style="height: 40vh;" ref="animation3"></div>
            <div class="col-6 col-lg-3 mt-2" style="height: 40vh;" ref="animation4"></div>
        </div>
        <div class="h5 mt-4">
            安装
        </div>
        <highlightjs language="bash" code="npm install lottie-web --save
//需要安装这个库lottie-web，vue2好像需要安装另一个库，github则需要安装另一个库。本站只演示Vue3如何使用lottie-web这个库。
" />
        <div class="h5 mt-4">
            在Vue页面中引入lottie-web，和下载的动画JSON并渲染
        </div>
        <highlightjs language="javascript" code='<template>
    <div class="row">
        <div style="height:300px" ref="animation1"></div>
        <div style="height:300px" ref="animation2"></div>
        <div style="height:300px" ref="animation3"></div>
        <div style="height:300px" ref="animation4"></div>
    </div>
</template>
<script setup>
    import { ref, onMounted} from "vue";//引入需要使用的api
    import lottie from "lottie-web";//引入库
    import json001 from "~src/assets/json/json001.json"//引入动画json
    import json002 from "~src/assets/json/json002.json";//引入动画json
    import json003 from "~src/assets/json/json003.json";//引入动画json
    import json004 from "~src/assets/json/json004.json";//引入动画json
    const animation1 = ref(null)//定义ref,选择dom
    const animation2 = ref(null)//定义ref,选择dom
    const animation3 = ref(null)//定义ref,选择dom
    const animation4 = ref(null)//定义ref,选择dom
    onMounted(() => {//这个生命周期获取dom
        for (let index = 1; index < 5; index++) { //循环渲染四个
            lottie.loadAnimation({ //渲染函数，对象参数
                container: eval(`animation${index}`).value,//渲染的dom
                renderer: "svg" , //渲染格式
                loop: true, //是否循环播放
                autoplay: true, //是否自动播放
                animationData: eval(`json00${index}`), //对应的动画json文件
           }); 
        } 
    })

</script>
' />
    </div>
</template>

<script setup >
import { ref, onMounted } from "vue";
import { storeToRefs } from "pinia"
import { useStore } from "~src/store/index";
import { useRoute, useRouter } from "vue-router";
import lottie from "lottie-web";
import json001 from "~src/assets/json/json001.json";
import json002 from "~src/assets/json/json002.json";
import json003 from "~src/assets/json/json003.json";
import json004 from "~src/assets/json/json004.json";
const animation1 = ref(null)
const animation2 = ref(null)
const animation3 = ref(null)
const animation4 = ref(null)
onMounted(() => {
    for (let index = 1; index < 5; index++) {
        lottie.loadAnimation({
            container: eval(`animation${index}`).value,
            renderer: "svg",
            loop: true,
            autoplay: true,
            animationData: eval(`json00${index}`),
        });
    }

})

</script>
<style scoped lang="less">

</style>